<template>
  <div>
    <div class="content" v-if="headerAdd">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="产品名称">
          <el-input v-model="queryParams.goodsName" clearable placeholder="产品名称"></el-input>
        </el-form-item>
        <el-button type="primary" @click="btnAdd">新增</el-button>
        <el-button type="primary" plain @click="getList">查询</el-button>
      </el-form>
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="userName" label="用户名"></el-table-column>
        <el-table-column fixed prop="goodsReportId" label="商品报告编码"></el-table-column>
        <el-table-column fixed prop="promotionPlan" label="推广计划"></el-table-column>
        <!-- <el-table-column prop="userId" label="userId"></el-table-column> -->
        
        <el-table-column prop="promotionUnit" label="推广单元"></el-table-column>
        <el-table-column prop="goodsId" label="产品编码"></el-table-column>
        <el-table-column prop="goodsName" label="产品名称"></el-table-column>
        <el-table-column prop="goodsType" label="产品类别"></el-table-column>
        <el-table-column prop="oneClassificationName" label="一级分类名称"></el-table-column>
        <el-table-column prop="twoClassificationName" label="二级分类名称"></el-table-column>
        <el-table-column prop="threeClassificationName" label="三级分类名称"></el-table-column>
        <el-table-column prop="shortGender" label="短剧男女频"></el-table-column>
        <el-table-column prop="consumption" label="消费"></el-table-column>
        <el-table-column prop="toShow" label="展现"></el-table-column>
        <el-table-column prop="click" label="点击"></el-table-column>
        <!-- <el-table-column prop="promotionDevice" label="投放设备"></el-table-column> -->
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row.goodsReportId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer" v-if="headerAdd">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <add v-if="addShow" :objData="objData" :isEdit="isEdit" @handleCancle="handleCancle"></add>
    <detail v-if="viewShow" :objData="objData" @handleCancle="handleCancle"></detail>
  </div>
</template>
<script>
import { list, del } from "@/api/sjbg/shangpin";
import add from "./component/add";
import detail from "./component/detail";
import { mapState } from "vuex";
export default {
  name: "fukuang",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: "",
        userName: "",
        goodsName: ""
      },
      headerAdd: true,
      addShow: false,
      viewShow: false,
      loading: false,
      isEdit: false,
      tableData: [],
      total: 0
    };
  },
  components: {
    add,
    detail
  },
  computed: {
    ...mapState(["user"])
  },
  mounted() {
    // TODO:
    // this.queryParams.userId = this.user.id;
    this.getList();
  },
  methods: {
    handleCancle() {
      this.addShow = false;
      this.headerAdd = true;
      this.viewShow = false;
      this.isEdit = false;
      this.getList();
    },
    // 新增
    btnAdd() {
      this.addShow = true;
      this.viewShow = false;
      this.headerAdd = false;
      this.isEdit = false;
    },
    // 编辑
    handleEdit(row) {
      this.addShow = true;
      this.viewShow = false;
      this.headerAdd = false;
      this.isEdit = true;
      this.objData = row;
    },
    // 查看
    handleView(row) {
      this.addShow = false;
      this.viewShow = true;
      this.headerAdd = false;
      this.objData = row;
    },
    // 删除
    handleDel(goodsReportId) {
      this.$confirm("确定要删除该条记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          del({ goodsReportId }).then(res => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    // 查询列表
    getList() {
      this.loading = true;
      list(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = +response.total;
        this.loading = false;
      });
    },
    handleCurrentChange(e) {
      this.queryParams.pageNum = e;
      this.getList();
    },
    handleSizeChange(e) {
      this.queryParams.pageSize = e;
      this.getList();
    }
  }
};
</script>
<style scoped>
.content {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}
.footer {
  display: flex;
  justify-content: end;
  padding-right: 40px;
  padding-top: 23px;
}
</style>
